<template>

    <div class="tab">

        <van-tabbar v-model="active" @change="change">
            <van-tabbar-item>
                <span>外卖</span>
                <template #icon="props">
                    <img src="../assets/nav1_actived.png" alt="" v-if="active == 0">
                    <img src="../assets/nav1.png" v-else />
                </template>
            </van-tabbar-item>
            <van-tabbar-item>
                <span>搜索</span>
                <template #icon="props">
                    <img src="../assets/nav2_actived.png" alt="" v-if="active == 1">
                    <img src="../assets/nav2.png" v-else />
                </template>
            </van-tabbar-item>
            <van-tabbar-item>
                <span>订单</span>
                <template #icon="props">
                    <img src="../assets/nav3_actived.png" alt="" v-if="active == 2">
                    <img src="../assets/nav3.png" v-else />
                </template>
            </van-tabbar-item>
            <van-tabbar-item>
                <span>我的</span>
                <template #icon="props">
                    <img src="../assets/nav4_actived.png" alt="" v-if="active == 3">
                    <img src="../assets/nav4.png" v-else />
                </template>
            </van-tabbar-item>
        </van-tabbar>

    </div>
</template>
<script>
export default {
    data() {
        return {
            active: 0
        }
    },
    props: ['index'],
    created() {
        this.active = this.$props.index;
    },
    methods: {
        change(index) {
            console.log(index)
            // if (index == 0) {
            //     this.$router.push('/')
            // }
            // if (index == 1) {
            //     this.$router.push('/sreach')
            // }
            // if (index == 2) {
            //     this.$router.push('/order')
            // }
            // if (index == 3) {
            //     this.$router.push('/my')
            // }
        }
    }
}
</script>
<style lang="less">
.tab {
    z-index: 999;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 90px;
    background-color: green;

    .van-tabbar {
        img {
            height: 40px;
        }

        height: 90px !important;

        .van-tabbar-item__text {
            span {
                color: #414141;
                font-size: 26px;
                margin-top: 3px;
            }
        }
    }
}
</style>